'use strict'

import React, { Component } from 'react'
import * as color from '../../configs/color'
import noop from 'lodash/noop'
import Mask from './Mask'

const wrapperStyle = {
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: '0'
}

const dialogStyle = {
    zIndex: '200',
    position: 'fixed',
    top: '35%',
    left: '20px',
    right: '20px',
    paddingTop: '25px',
    borderRadius: '5px',
    textAlign: 'center',
    backgroundColor: color.WHITE
}

const headerStyle = {
    marginBottom: '18px'
}

const titleStyle = {
    margin: 0,
    padding: 0,
    fontSize: '20px',
    lineHeight: '20px',
    color: color.DARK
}

const contentStyle = {
    padding: '15px',
    fontSize: '16px',
    color: color.GRAY
}

const footerStyle = {
    borderTop: '1px solid ' + color.BORDER,
    marginTop: '25px',
    height: '44px',
    lineHeight: '44px',
    color: color.INVERSE,
    fontSize: '18px',
    overflowX: 'hidden'
}

const okStyle = {
    width: '100%',
    height: '44px',
    float: 'left'
}

const cancelStyle = {
    height: '44px',
    width: '50%',
    float: 'left'
}

export default class Dialog extends Component {
    constructor(props) {
        super(props)
        this.handleClickOk = this.handleClickOk.bind(this)
        this.handleClickCancel = this.handleClickCancel.bind(this)
        this.dismiss = this.dismiss.bind(this)
        this.state = {
            on: this.props.on
        }
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            on: nextProps.on
        })
    }

    dismiss() {
        this.setState({
            on: false
        }, () => {
            this.props.onDismiss()
        })
    }

    handleClickOk() {
        this.dismiss()
        this.props.ok.call()
    }

    handleClickCancel() {
        this.dismiss()
        this.props.cancel.call()
    }

    render() {
        const okStyleWithBorder = Object.assign({}, okStyle, {
            width: '50%',
            borderRight: '1px solid ' + color.BORDER
        })

        const renderStyle = Object.assign({}, wrapperStyle, {
            display: this.state.on ? 'block' : 'none'
        })
        return (
            <div style={renderStyle}>
                {this.props.mask ? <Mask/> : null}
                <div style={dialogStyle}>
                    {this.props.title ? <header style={headerStyle}><h2 style={titleStyle}>{this.props.title}</h2></header> : null}
                    <div style={contentStyle}>{this.props.message}</div>
                    <footer style={footerStyle}>
                        <div onClick={this.handleClickOk} style={this.props.cancel ? okStyleWithBorder : okStyle}>{this.props.okLabel}</div>
                        {this.props.cancel ? <div onClick={this.handleClickCancel} style={cancelStyle}>{this.props.cancelLabel}</div> : null}
                    </footer>
                </div>
            </div>
        )
    }
}

Dialog.defaultProps = {
    on: false,
    mask: true,
    title: '',
    message: '',
    ok: noop,
    okLabel: '确定',
    cancel: noop,
    cancelLabel: '取消',
    onDismiss: noop
}